<template>
    <div class="distribution">
        <div class="one">
            <div class="header">分派人员</div>
            <div style="height: 630px; overflow: auto">
                <tree :data="peoples" placeholder="请输入分派人员" ref="peoplesRef" isShowCheckbox @treeCheck="peopleTreeCheck" :treeProps="treeProps">
                    <template #default="{ scope }">
                        <div class="custom-tree-node">
                            <template v-if="!scope.data.childs">
                                <img src="@/assets/image/report/person.png" class="child-img" />
                            </template>
                            <template v-else>
                                <img src="@/assets/image/report/manage.png" class="parent-img" />
                            </template>
                            <span class="label">{{ scope.data.name }}</span>
                        </div>
                    </template>
                </tree>
            </div>
        </div>
        <div class="one">
            <div class="header">负责对象</div>
            <div style="height: 630px; overflow: auto">
                <tree :data="props.responsible" ref="devicesRef" placeholder="请输入设备名称" isShowCheckbox :treeProps="treeProps">
                    <template #default="{ scope }">
                        <div class="custom-tree-node">
                            <template v-if="!scope.data.childs">
                                <img src="@/assets/image/report/child.png" class="child-img" />
                            </template>
                            <template v-else>
                                <img src="@/assets/image/report/parent.png" class="parent-img" />
                            </template>
                            <span class="label">{{ scope.data.name }}</span>
                        </div>
                    </template>
                </tree>
            </div>
        </div>
        <div class="btn" @click="handlerLeft">
            <el-icon :size="20" color="#fff"><ArrowLeft /></el-icon>
        </div>
        <div class="btn" @click="handlerRight">
            <el-icon :size="20" color="#fff"><ArrowRight /></el-icon>
        </div>
        <div class="one">
            <div class="header">已选人员</div>
            <tree :data="chooseData" ref="choosedRef" :isShowInput="false" isShowCheckbox :treeProps="treeProps">
                <template #default="{ scope }">
                    <div class="custom-tree-node">
                        <template v-if="!scope.data.childs">
                            <img src="@/assets/image/report/child.png" class="child-img" />
                        </template>
                        <template v-else>
                            <img src="@/assets/image/report/parent.png" class="parent-img" />
                        </template>
                        <span class="label">{{ scope.data.name }}</span>
                    </div>
                </template>
            </tree>
        </div>
    </div>
</template>

<script setup>
import tree from "@/components/tree.vue";
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
import { getPersonTree } from "@/service/api/report.js";
import { mainStore } from "@/store/main.js";
import { ref } from "vue";
import { useRoute } from "vue-router";
import { cloneDeep } from "@/utils/utils.js";
const route = useRoute();
const treeProps = { label: "name", children: "childs" };
const props = defineProps({
    responsible: {
        type: Object,
        default: () => ({})
    }
});
const mStore = mainStore();
function recursionData(arr, fn) {
    for (let i = 0; i < arr.length; i++) {
        if (arr[i].isDepartment) arr[i].disabled = "disabled";
        if (!arr[i].childs) continue;
        recursionData(arr[i].childs, fn);
    }
}
getPersonTree({ orderCode: route.query.order || mStore.tableData.orderCode }).then((res) => {
    if (res.code === 200) {
        recursionData(res.data);
        peoples.value = res.data;
    }
});
const chooseData = ref([]);
const peoples = ref([]);
const peoplesRef = ref(null);
const devicesRef = ref(null);
const choosedRef = ref(null);
const handlerRight = () => {
    const choose = peoplesRef.value.treeRef.getCheckedNodes(true);
    const deviceChoose = devicesRef.value.treeRef.getCheckedNodes(true);
    if (!choose.length) {
        ElMessage({
            message: "请指定分派人员",
            type: "error"
        });
        return;
    }
    choose.forEach((item) => {
        const find = chooseData.value.find((chooseDataItem) => item.id === chooseDataItem.id);
        const arr = [];
        deviceChoose.forEach((deviceItem) => {
            const itemCopy = Object.assign({}, deviceItem);
            itemCopy.deviceId = item.id;
            arr.push(itemCopy);
            devicesRef.value.treeRef.remove(deviceItem);
            const find = props.responsible.find((responsibleItem) => responsibleItem.id === deviceItem.parentId);
            if (!find.childs.length) find.disabled = "disabled";
        });
        if (find) {
            arr.forEach((item) => {
                choosedRef.value.treeRef.append(item, find.id);
            });
        } else {
            const itemCopy = Object.assign({}, item);
            chooseData.value.push(itemCopy);
            itemCopy.childs = arr;
        }
        peoplesRef.value.treeRef.setChecked(item, false); //添加人员之后取消勾选
    });
    devicesRef.value.treeRef.setCheckedKeys([]);
};
const handlerLeft = () => {
    const ids = choosedRef.value.treeRef.getCheckedKeys(true);
    const copy = cloneDeep(chooseData.value);
    for (let i = 0; i < copy.length; i++) {
        for (let j = 0; j < copy[i].childs.length; j++) {
            if (ids.includes(copy[i].childs[j].id)) {
                const find = props.responsible.find((responsibleItem) => responsibleItem.id === copy[i].childs[j].parentId);
                devicesRef.value.treeRef.append(copy[i].childs[j], find.id);
                choosedRef.value.treeRef.remove(copy[i].childs[j]);
            }
        }
    }
    const copy1 = cloneDeep(chooseData.value);
    copy1.forEach((item) => {
        if (!item.childs.length) {
            choosedRef.value.treeRef.remove(item);
        }
    });
    props.responsible.forEach((item) => {
        if (item.childs.length) item.disabled = "";
    });
};
//实现单选
const peopleTreeCheck = (data, list) => {
    if (list.checkedKeys.length >= 2) {
        peoplesRef.value.treeRef.setCheckedKeys([data.id]);
    }
};
// const chooesdTreeCheck = (data, list) => {
//     //判断父节点 子节点
//     if (chooseData.value.some((item) => data.id === item.id) && list.checkedKeys.length >= 1) {
//         choosedRef.value.treeRef.setCheckedNodes([data]);
//     } else {
//         const filter = chooseData.value.filter((item) => item.id !== data.Deviceid); //找出不是当前选择的节点树 设置false
//         filter.forEach((item) => {
//             choosedRef.value.treeRef.setChecked(item.id, false, true);
//         });
//     }
// };
defineExpose({
    chooseData
});
</script>

<style lang="scss" scoped>
.distribution {
    display: flex;
    align-items: center;
    margin-top: 16px;
    height: 669px;
    .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 16px;
        min-width: 45px;
        height: 45px;
        background-color: #00428e;
        cursor: pointer;
    }
    .one {
        box-sizing: border-box;
        width: calc(100% / 3);
        height: 100%;
        padding: 16px;
        background-color: #ffffff;
    }
    .header {
        font-weight: 600;
        color: #1b3646;
    }
    .custom-tree-node {
        display: flex;
        align-items: center;
        .child-img {
            width: 15px;
            height: 16px;
        }
        .parent-img {
            width: 18px;
            height: 17px;
        }
        .label {
            margin-left: 9px;
        }
    }
}
</style>
